<template>
  <div class="other-box">
    <van-cell-group inset style="font-size: 20px;">
      <van-field
        v-model="site_name"
        label="网站名称"
        placeholder="请输入用户名"
      />

      <van-field
        v-model="nf_name"
        label="产品1名称"
        placeholder="请输入产品1名称"
      />
      <van-field
        v-model="nf_price"
        label="产品1单价"
        placeholder="请输入产品1单价"
      />
      <van-field
        v-model="nf_num"
        label="产品1上限桶数"
        placeholder="请输入产品1上限桶数"
      />
      
      <van-field
        v-model="jt_name"
        label="产品2名称"
        placeholder="请输入产品2名称"
      />
      <van-field
        v-model="jt_price"
        label="产品2单价"
        placeholder="请输入产品2单价"
      />
      <van-field
        v-model="jt_num"
        label="产品2上限桶数"
        placeholder="请输入产品2上限桶数"
      />

      <div
        style="text-align: left; padding: 10px 16px; padding-left: 16px; font-size: 20px"
      >
        LOGO图片
      </div>
      <div class="img">
        <van-uploader
          v-model="adList"
          :max-count="1"
          :after-read="beforeRead"
        />
      </div>
      <div
        style="text-align: left; padding: 10px 16px; padding-left: 16px; font-size: 20px"
      >
        公告
      </div>
      <textarea
        v-model="notice"
        rows="5"
        cols="40"
        class="area"
        placeholder="请输入公告"
      ></textarea>
    </van-cell-group>
    <div style="padding: 30px;">
      <van-button round block type="primary" @click="submit"> 提交 </van-button>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, ref } from "vue";
import { Button, CellGroup, Field, Toast, Uploader } from "vant";
import httpUploadFile from "../../../api/uploadFile";
import httpConfig from "../../../api/system-config";
export default {
  name: "OtherConfig",
  components: {
    "van-cell-group": CellGroup,
    "van-field": Field,
    "van-uploader": Uploader,
    "van-button": Button,
  },
  setup() {
    const data = reactive({
      site_name: "",
      logo_src: "",
      nf_price: "",
      nf_name:"",
      nf_num:"",
      jt_price: "",
      jt_name:"",
      jt_num:"",
      notice: "",
    });
    // 上传logo图
    const adList = ref([]);
    // 上传logo
    const beforeRead = async (file) => {
      if (!/\.(jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.file.name)) {
        adList.value = [];
        return Toast("请上传图片");
      }
      const files = new FormData();
      files.append("file", file.file);
      const res = await httpUploadFile.uploadFile(files);
      if (res) {
        adList.value = [{ url: "https://water.mfyyxm.com" + res.data }];
        data.logo_src = res.data;
      }
    };
    // 获取配置信息
    const getConfig = async () => {
      try {
        const res = await httpConfig.one({ id: 1 });
        if (res) {
          // console.log(res);
          data.id = res.data.id;
          data.site_name = res.data.site_name;
          data.logo_src = res.data.logo_src;
          data.nf_price = res.data.nf_price;
          data.nf_name = res.data.nf_name;
          data.nf_num = res.data.nf_num;
          data.jt_price = res.data.jt_price;
          data.jt_name = res.data.jt_name;
          data.jt_num = res.data.jt_num;

          data.notice = res.data.notice;
          adList.value = [
            { url: "https://water.mfyyxm.com" + res.data.logo_src },
          ];
        }
      } catch (error) {
        Toast("获取配置信息出错");
        // console.log(error);
      }
    };
    getConfig();
    // 提交
    const submit = async () => {
      try {
        const res = await httpConfig.update(data);
        if (!res) return;
        if (res.code == 200) {
          getConfig();
          Toast("修改成功");
        }
      } catch (error) {
        // console.log(error);
        Toast("修改时出错了");
      }
    };
    return {
      adList,
      beforeRead,
      submit,
      ...toRefs(data),
    };
  },
};
</script>
<style scoped lang="less">
.area {
  font-size: 40px;
  outline: none;
  resize: none;
  padding: 20px;
  max-width: 564px;
}
.other-box {
  padding-bottom: 120px;
}
::v-deep .van-button,
::v-deep .van-cell {
  font-size: 40px;
}
</style>
